<template>
  <div>
    <el-container>
      <el-header>账号设置</el-header>
      <el-main>
        <el-row gutter=24>
          <el-col :span=12 >更改密码</el-col>
          <el-col :span=12 >更改邮箱
          </el-col>
        </el-row>
        <el-row gutter=24>
          <el-col :span=12 >当前密码<el-input
            placeholder="请输入当前密码"
            v-model="input_Old_Password"
            type="password"
            clearable>
          </el-input></el-col>
          <el-col :span=12 >当前密码<el-input
            placeholder="请输入当前密码"
            v-model="input_Current_Password"
            type="password"
            clearable>
          </el-input></el-col>
        </el-row>
        <el-row gutter=24>
          <el-col :span=12 >新密码<el-input
            placeholder="请输入新密码"
            v-model="input_New_Password"
            type="password"
            clearable>
          </el-input></el-col>
          <el-col :span=12 >当前邮箱<el-input
            placeholder="请输入当前邮箱"
            v-model="input_Current_Email"
            >
          </el-input></el-col>
        </el-row>
        <el-row gutter=24>
          <el-col :span=12 >新密码确认<el-input
            placeholder="请确认新密码"
            v-model="confirm_New_Password"
            type="password"
            clearable>
          </el-input></el-col>
          <el-col :span=12 >新邮箱<el-input
            placeholder="请输入新邮箱"
            v-model="input_New_Email"
            clearable>
          </el-input></el-col>
        </el-row>
        <el-row gutter=24>
          <el-col :span=12 >
            <el-button type="primary" plain @click="updatePassword">Update Password</el-button>
          </el-col>
          <el-col :span=12 >
            <el-button type="primary" plain @click="updateEmail">Update Email</el-button>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Account',
  data: function () {
    return {
      ID: localStorage.getItem('userID'),
      input_Old_Password: '',
      input_Current_Password: '',
      input_New_Password: '',
      input_Current_Email: '',
      confirm_New_Password: '',
      input_New_Email: ''
    }
  },
  methods: {
    // 交互函数，修改密码
    updatePassword () {
      if (!this.input_Old_Password) {
        // this.$message.error 常用于主动操作的反馈提示
        this.$message.error('请输入修改前密码')
        return
      }
      if (!this.input_New_Password) {
        this.$message.error('请输入修改后密码')
        return
      }
      if (this.input_New_Password !== this.confirm_New_Password) {
        this.$message.error('请保证修改后密码与确认密码一致')
        return
      }
      // let that = this
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('POST', 'http://127.0.0.1:3100/users/resetPassword')
      xmlhttp.setRequestHeader('content-type', 'application/json')
      let data = {id: this.ID, oldPassword: this.input_Old_Password, newPassword: this.input_New_Password}
      xmlhttp.onreadystatechange = function (res) {
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            if (xmlhttp.response === '1') {
              alert('修改成功')
            } else {
              alert(xmlhttp.response)
            }
          }
        }
      }
      xmlhttp.send(JSON.stringify(data))
      location.reload()
    },
    // 交互函数，修改邮箱
    updateEmail () {
      if (!this.input_Current_Password) {
        // this.$message.error 常用于主动操作的反馈提示
        this.$message.error('请输入密码')
        return
      }
      if (!this.input_Current_Email) {
        this.$message.error('请输入修改前邮箱')
        return
      }
      if (!this.input_New_Email) {
        this.$message.error('请输入修改后邮箱')
        return
      }
      // let that = this
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('POST', 'http://127.0.0.1:3100/users/resetEmail')
      xmlhttp.setRequestHeader('content-type', 'application/json')
      let data = {id: this.ID, password: this.input_Current_Password, oldEmail: this.input_Current_Email, newEmail: this.input_New_Email}
      xmlhttp.onreadystatechange = function (res) {
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            if (xmlhttp.response === 'true') {
              alert('修改成功')
            } else {
              alert(xmlhttp.response)
            }
          }
        }
      }
      xmlhttp.send(JSON.stringify(data))
      location.reload()
    }
  }
}
</script>

<style scoped>
</style>
